<template>
  <div class="bg-[#fff] p-[10px]">
    <vxe-form @submit.prevent>
      <vxe-form-item v-for="(field, index) in localFilterFields" :key="index">
        <div class="form-item-with-delete" @mouseenter.native="hoverIndex = index" @mouseleave="hoverIndex = null">
          <!-- 删除按钮 -->
          <el-icon class="delete-btn" v-if="field.removable && hoverIndex === index" @click="removeField(field, index)">
            <CircleClose />
          </el-icon>
          <!-- 动态渲染控件 -->
          <component :is="getComponent(field.type)" v-model="queryParams[field.prop]" v-bind="{ size: 'mini', clearable: true, ...field.attrs }">
            <template #prefix>
              <span class="px-[5px] c-[#000]">{{ field.label }}</span>
            </template>
            <!-- select / multiple select 配置 -->
            <template v-if="field.type === 'select' || field.type === 'multipleSelect'" v-for="option in field.options" :key="option.value">
              <vxe-option :value="option.value" :label="option.label"></vxe-option>
            </template>
          </component>
        </div>
      </vxe-form-item>
      <vxe-form-item>
        <vxe-button size="mini" @dropdown-click="dropdownClickEvent">
          <template #default>添加条件</template>
          <template #dropdowns>
            <vxe-button v-for="item in filterBtns" :name="item.prop" mode="text" :content="item.label"></vxe-button>
          </template>
        </vxe-button>
        <vxe-button size="mini" @click="handleSeach">搜索条件</vxe-button>
        <vxe-button size="mini" @click="resetSearch">清除条件</vxe-button>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script setup>
const hoverIndex = ref(null);
const props = defineProps({
  filterFields: Array,
  modelValue: Object,
  loading: Boolean,
  showSearch: Boolean,
  animate: Object,
  addConfigFields: Array
});
// 本地维护 filterFields，避免直接修改 props
const localFilterFields = ref([...props.filterFields]);
const emits = defineEmits(['update:modelValue', 'search', 'reset', 'updateList', 'handleSelect', 'selectChange']);
const queryParams = computed({
  get: () => props.modelValue,
  set: (val) => emits('update:modelValue', val)
});
const filterBtns = ref([...props.addConfigFields]);
// 控件映射函数
const getComponent = (type) => {
  switch (type) {
    case 'input':
      return 'vxe-input';
    case 'select':
      return 'vxe-select';
    case 'multipleSelect':
      return 'vxe-select';
    case 'dateRange':
      return 'vxe-date-range-picker';
    case 'datetimeRange':
      return 'vxe-date-range-picker';
    case 'monthRange':
      return 'vxe-date-range-picker';
    case 'treeSelect':
      return 'vxe-tree-select';
    default:
      return 'vxe-input';
  }
};
// 搜索条件
const handleSeach = () => emits('search');
// 重置条件
const resetSearch = () => emits('reset');
// 添加条件
const dropdownClickEvent = ({ name }) => {
  const filterIndex = filterBtns.value.findIndex((item) => item.prop == name);
  localFilterFields.value.push({ ...filterBtns.value[filterIndex], removable: true });
  filterBtns.value.splice(filterIndex, 1);
};

// 请求下拉数据
const loadOptions = async (field) => {
  if (!field.api) return;
  try {
    const res = await axios.get(field.api);
    const { value = 'value', label = 'label' } = field.mapField || {};
    field.options = res.data.map((item) => ({
      value: item[value],
      label: item[label]
    }));
  } catch (e) {}
};
// 初始化加载接口下拉
onMounted(() => {
  localFilterFields.value.forEach((field) => loadOptions(field));
});
const removeField = (field, index) => {
  //从 localFilterFields 移除
  localFilterFields.value.splice(index, 1);
  // 把它重新放回 filterBtns
  filterBtns.value.push(field);
};
</script>

<style lang="scss" scoped>
:deep(.vxe-form--item.is--padding > .vxe-form--item-content) {
  padding: 0px !important;
  min-height: 0px !important;
}

:deep(.vxe-form--item) {
  margin-right: 10px !important;
  margin-bottom: 5px;
  margin-top: 5px;
}

.form-item-with-delete {
  position: relative;
}

.delete-btn {
  position: absolute;
  top: -8px;
  right: -5px;
  z-index: 1;
  transition: opacity 0.2s;
  cursor: pointer;

  &:hover {
    color: #4d6bfe;
  }
}
</style>
